import React, { useEffect, useRef, useState } from "react";
import {
  Button,
  Card,
  Space,
  Typography,
  Input,
  message,
  Divider,
  Alert,
} from "antd";
import {
  PlayCircleOutlined,
  PauseCircleOutlined,
  StopOutlined,
  ReloadOutlined,
} from "@ant-design/icons";
import "@/tailwind-variables.less";

// 导入ezuikit-js
// @ts-expect-error ezuikit-js lacks TypeScript definitions
import EZUIKit from "ezuikit-js";

const { Title, Text } = Typography;

// 主组件
export const EzuikitPlayer: React.FC = () => {
  const playerRef = useRef<HTMLDivElement>(null);
  const playerInstanceRef = useRef<any>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [playerStatus, setPlayerStatus] = useState<
    "stopped" | "playing" | "paused"
  >("stopped");
  const [currentUrl, setCurrentUrl] = useState(
    "ezopen://lws12345678@open.ys7.com/FH8286826/1.hd.live"
  );
  const [playerLogs, setPlayerLogs] = useState<string[]>([]);
  const [accessToken, setAccessToken] = useState(
    "at.crom1fgq7a0clk1d3tcylnj64tfydnrp-6t7egllluj-1n6ga6p-irtlxq1vz"
  );

  // 检测是否在Storybook环境中
  const isStorybookEnv =
    typeof window !== "undefined" &&
    (window.location.pathname.includes("iframe.html") ||
      window.parent !== window ||
      document.title.includes("Storybook"));

  // 测试视频流地址
  const defaultUrls = [
    // 萤石云 ezopen 协议示例（需要真实的设备序列号和验证码）
    // 获取方式
    // 1. 登录萤石云官网，进入设备管理页面
    // 2. 选择需要获取直播流的设备，点击进入设备详情页面
    // 3. 在设备详情页面中，点击“直播流”标签，即可获取直播流地址,获取的地址格式为ezopen://open.ys7.com/设备序列号/通道号.hd.live
    // 4. 真实地址为：ezopen://lws12345678@open.ys7.com/FX2865890/1.hd.live,其中的lws12345678@通过开发项目直播功能查看真实地址链接获得
    // 4. 将获取到的真实直播流地址复制到下面的输入框中，点击“播放”按钮即可播放
    "ezopen://lws12345678@open.ys7.com/FX2865890/1.hd.live", // 萤石云直播流示例
    // "ezopen://open.ys7.com/XXX/XXX.rec", // 萤石云回放流示例
    // // HLS 流地址示例
    // "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
    // // 普通 MP4 文件（可能不被 EZUIKit 支持）
    // "https://media.w3.org/2010/05/sintel/trailer.mp4",
  ];

  const addLog = (message: string) => {
    const timestamp = new Date().toLocaleTimeString();
    const envInfo = isStorybookEnv ? " [Storybook]" : "";
    const logEntry = `[${timestamp}]${envInfo} ${message}`;
    setPlayerLogs((prev) => [logEntry, ...prev.slice(0, 19)]); // 保留最新20条记录
  };

  // 初始化播放器
  const initPlayer = async (url: string) => {
    if (!playerRef.current) {
      message.error("播放器容器未找到");
      return;
    }

    setIsLoading(true);
    addLog(`初始化播放器，URL: ${url}`);

    if (isStorybookEnv) {
      addLog("检测到Storybook环境，使用保守的清理策略");
    }

    try {
      // 检查是否有现有实例，优先复用
      if (playerInstanceRef.current) {
        try {
          addLog("检测到现有播放器实例，尝试更新URL...");

          // 尝试直接更新URL（如果支持）
          if (typeof playerInstanceRef.current.stop === "function") {
            playerInstanceRef.current.stop();
            addLog("停止当前播放");
          }

          // 检查是否支持URL更新
          if (typeof playerInstanceRef.current.changeStreamUrl === "function") {
            playerInstanceRef.current.changeStreamUrl(url);
            addLog("直接更新播放器URL");
            setCurrentUrl(url);
            return; // 直接返回，不需要重新创建
          } else {
            // 不支持URL更新，需要重新创建
            addLog("播放器不支持URL更新，将重新创建实例");
            if (typeof playerInstanceRef.current.destroy === "function") {
              playerInstanceRef.current.destroy();
              addLog("销毁旧播放器实例");
            }
            playerInstanceRef.current = null;
            // 等待DOM清理
            await new Promise((resolve) => setTimeout(resolve, 500));
          }
        } catch (error: any) {
          console.warn("处理现有播放器时出错:", error);
          addLog(`处理现有播放器失败: ${error?.message || "未知错误"}`);
          playerInstanceRef.current = null;
          await new Promise((resolve) => setTimeout(resolve, 300));
        }
      }

      // 确保容器存在且有效
      if (!playerRef.current) {
        message.error("播放器容器未找到");
        return;
      }

      // 如果容器失去了父节点，重新创建容器
      if (!playerRef.current.parentNode) {
        addLog("检测到容器失去父节点，正在重新创建...");
        try {
          // 创建新的div容器
          const newContainer = document.createElement("div");
          newContainer.style.width = "100%";
          newContainer.style.height = "400px";
          newContainer.style.backgroundColor = "#000";
          newContainer.style.borderRadius = "8px";
          newContainer.style.display = "flex";
          newContainer.style.alignItems = "center";
          newContainer.style.justifyContent = "center";
          newContainer.style.color = "white";
          newContainer.style.fontSize = "16px";
          newContainer.style.border = "2px dashed #d9d9d9";

          // 查找播放器区域的父容器并替换
          const playerArea = document.querySelector("[data-player-container]");
          if (playerArea && playerArea.parentNode) {
            playerArea.parentNode.replaceChild(newContainer, playerArea);
            newContainer.setAttribute("data-player-container", "true");
            // 更新ref引用
            (playerRef as any).current = newContainer;
            addLog("容器重新创建成功");
          } else {
            message.error("无法重新创建播放器容器，请刷新页面");
            return;
          }
        } catch (recreateError: any) {
          console.error("重新创建容器失败:", recreateError);
          addLog(`重新创建容器失败: ${recreateError?.message || "未知错误"}`);
          message.error("播放器容器重建失败，请刷新页面重试");
          return;
        }
      }

      // 温和的DOM清理 - 让EZUIKit自己管理大部分DOM操作
      addLog("准备DOM容器...");

      // 只清理明显的残留内容，不强制清理所有子节点
      if (playerRef.current.children.length > 0) {
        addLog(
          `检测到${playerRef.current.children.length}个子元素，进行温和清理`
        );
        // 使用更安全的方式清理
        try {
          // 先尝试查找并移除明显的播放器相关元素
          const playerElements = playerRef.current.querySelectorAll(
            '[id*="ezuikit"], [class*="ezuikit"], video, canvas'
          );
          playerElements.forEach((el) => {
            try {
              if (el.parentNode) {
                el.parentNode.removeChild(el);
              }
            } catch (e) {
              console.warn("清理播放器元素时出错:", e);
            }
          });
          addLog("温和清理完成");
        } catch (cleanupError: any) {
          console.warn("清理DOM时出错:", cleanupError);
          addLog(`DOM清理警告: ${cleanupError?.message || "未知错误"}`);
        }
      }

      // 为容器设置唯一ID，让 EZUIKit 自己管理 DOM
      const containerId = `ezuikit-player-${Date.now()}-${Math.random()
        .toString(36)
        .substr(2, 9)}`;
      playerRef.current.id = containerId;
      addLog(`设置容器ID: ${containerId}`);

      // 检测协议类型并配置播放器
      const isEzopen = url.startsWith("ezopen://");
      const isHLS = url.includes(".m3u8");
      const protocolType = isEzopen ? "ezopen" : isHLS ? "HLS" : "HTTP";

      addLog(`检测到协议类型: ${protocolType}`);

      // 创建新的播放器实例
      addLog("开始创建EZUIKit播放器实例...");
      const playerConfig: any = {
        id: containerId, // 视频容器ID（字符串）
        url: url, // 播放地址
        template: "simple", // 播放器模板
        width: "100%",
        height: "400px",
        autoplay: true,
        controls: true,
        // 播放器配置
        handleSuccess: () => {
          // 添加null检查
          if (playerInstanceRef.current) {
            addLog("播放器初始化成功");
            setPlayerStatus("playing");
          } else {
            addLog("播放器成功回调时实例已被清理");
          }
        },
        handleError: (error: any) => {
          const errorMsg = error?.msg || error?.message || "未知错误";
          const errorCode = error?.code || "";
          addLog(`播放器错误: ${errorMsg} (代码: ${errorCode})`);

          if (errorCode === "10001") {
            message.error(
              "协议格式错误：请使用正确的萤石云 ezopen:// 协议地址"
            );
          } else if (errorCode === "10002") {
            message.error("设备不在线或访问权限不足");
          } else if (errorCode === "10003") {
            message.error("AccessToken无效或已过期");
          } else {
            message.error(`播放器初始化失败: ${errorMsg}`);
          }
          setPlayerStatus("stopped");
        },
        // 添加更多回调处理
        handlePlay: () => {
          if (playerInstanceRef.current) {
            addLog("开始播放");
            setPlayerStatus("playing");
          }
        },
        handlePause: () => {
          if (playerInstanceRef.current) {
            addLog("播放暂停");
            setPlayerStatus("paused");
          }
        },
        handleStop: () => {
          addLog("播放停止");
          setPlayerStatus("stopped");
        },
      };

      // 根据协议类型添加特定配置
      if (isEzopen) {
        // ezopen 协议的特殊配置，通过开发项目直播功能查看accessToken获得
        if (accessToken && accessToken.trim()) {
          playerConfig.accessToken = accessToken.trim();
          addLog(
            `使用萤石云 ezopen 协议配置，AccessToken: ${accessToken.substring(
              0,
              10
            )}...`
          );
        } else {
          addLog("警告：萤石云协议需要AccessToken，但未提供");
          message.warning("使用萤石云协议建议提供AccessToken");
        }
      } else if (isHLS) {
        // HLS 流的特殊配置
        addLog("使用 HLS 流配置");
      } else {
        // 普通 HTTP 视频的配置
        addLog("尝试使用 HTTP 协议（可能不被完全支持）");
      }

      // 创建播放器实例时添加额外的保护
      let player: any = null;
      try {
        // 再次确认容器仍然有效
        if (!playerRef.current || !document.getElementById(containerId)) {
          throw new Error("播放器容器在创建前已失效");
        }

        addLog("正在实例化EZUIKit播放器...");
        player = new EZUIKit.EZUIKitPlayer(playerConfig);

        if (!player) {
          throw new Error("EZUIKit播放器实例创建失败");
        }

        addLog("EZUIKit播放器实例创建成功");
        playerInstanceRef.current = player;
        setCurrentUrl(url);

        // 添加实例状态检查
        setTimeout(() => {
          if (playerInstanceRef.current === player) {
            addLog("播放器实例状态正常");
          } else {
            addLog("警告：播放器实例引用已变更");
          }
        }, 1000);
      } catch (playerError: any) {
        console.error("创建EZUIKit播放器时出错:", playerError);
        addLog(`播放器实例创建失败: ${playerError?.message || "未知错误"}`);
        throw playerError; // 重新抛出错误以便被外层catch捕获
      }
    } catch (error: any) {
      console.error("播放器初始化失败:", error);
      addLog(`播放器初始化失败: ${error?.message || "未知错误"}`);
      message.error("播放器初始化失败");
      setPlayerStatus("stopped");
    } finally {
      setIsLoading(false);
    }
  };

  // 播放控制
  const playVideo = () => {
    if (playerInstanceRef.current) {
      try {
        if (typeof playerInstanceRef.current.play === "function") {
          playerInstanceRef.current.play();
          setPlayerStatus("playing");
          addLog("开始播放");
        } else {
          addLog("播放器实例不支持播放方法");
          message.error("播放器实例无效");
        }
      } catch (error: any) {
        addLog(`播放失败: ${error?.message || "未知错误"}`);
        message.error("播放失败");
      }
    } else {
      message.warning("请先初始化播放器");
      addLog("尝试播放但播放器未初始化");
    }
  };

  // 暂停播放
  const pauseVideo = () => {
    if (playerInstanceRef.current) {
      try {
        if (typeof playerInstanceRef.current.pause === "function") {
          playerInstanceRef.current.pause();
          setPlayerStatus("paused");
          addLog("暂停播放");
        } else {
          addLog("播放器实例不支持暂停方法");
          message.error("播放器实例无效");
        }
      } catch (error: any) {
        addLog(`暂停失败: ${error?.message || "未知错误"}`);
        message.error("暂停失败");
      }
    } else {
      message.warning("播放器未运行");
      addLog("尝试暂停但播放器未运行");
    }
  };

  // 停止播放
  const stopVideo = () => {
    if (playerInstanceRef.current) {
      try {
        addLog("开始停止播放器...");
        // 使用温和的stop方法，而不是destroy，避免DOM被移除
        if (typeof playerInstanceRef.current.stop === "function") {
          playerInstanceRef.current.stop();
          addLog("使用stop方法停止播放");
        } else if (typeof playerInstanceRef.current.pause === "function") {
          playerInstanceRef.current.pause();
          addLog("使用pause方法暂停播放");
        }

        // 不立即销毁实例，只是停止播放
        // playerInstanceRef.current = null; // 注释掉，保持实例
        setPlayerStatus("stopped");
        addLog("播放器已停止，实例保持以便下次播放");
      } catch (error: any) {
        console.error("停止播放器时出错:", error);
        addLog(`停止失败: ${error?.message || "未知错误"}`);
        message.error("停止失败");
        setPlayerStatus("stopped");
      }
    } else {
      addLog("播放器未运行，无需停止");
      setPlayerStatus("stopped");
    }
  };

  const reloadVideo = async () => {
    if (currentUrl) {
      addLog("开始重新加载播放器");
      setIsLoading(true);

      try {
        // 先停止当前播放器
        if (playerInstanceRef.current) {
          addLog("停止当前播放器实例");
          try {
            if (typeof playerInstanceRef.current.destroy === "function") {
              playerInstanceRef.current.destroy();
              addLog("销毁旧播放器实例");
            } else if (typeof playerInstanceRef.current.stop === "function") {
              playerInstanceRef.current.stop();
              addLog("停止旧播放器实例");
            }
            playerInstanceRef.current = null;
            setPlayerStatus("stopped");

            // 等待足够时间确保清理完成
            addLog("等待播放器清理完成...");
            await new Promise((resolve) => setTimeout(resolve, 1000));
          } catch (error: any) {
            console.error("清理旧播放器失败:", error);
            addLog(`清理旧播放器失败: ${error?.message || "未知错误"}`);
            // 即使清理失败，也继续重新初始化
            await new Promise((resolve) => setTimeout(resolve, 500));
          }
        }

        // 重新初始化
        addLog("开始重新初始化播放器");
        await initPlayer(currentUrl);
      } catch (error: any) {
        console.error("重新加载播放器失败:", error);
        addLog(`重新加载失败: ${error?.message || "未知错误"}`);
        message.error("重新加载播放器失败");
      } finally {
        setIsLoading(false);
      }
    } else {
      message.warning("请先选择视频源");
    }
  };

  const clearLogs = () => {
    setPlayerLogs([]);
  };

  // 组件卸载时清理
  useEffect(() => {
    return () => {
      console.log("EzuikitPlayer 组件正在卸载，清理播放器...");
      if (playerInstanceRef.current) {
        try {
          // 组件卸载时使用 destroy 方法彻底清理
          if (typeof playerInstanceRef.current.destroy === "function") {
            playerInstanceRef.current.destroy();
          } else if (typeof playerInstanceRef.current.stop === "function") {
            playerInstanceRef.current.stop();
          }
          playerInstanceRef.current = null;
          console.log("播放器实例已清理");
        } catch (error) {
          console.warn("清理播放器时出错:", error);
        }
      }
      // DOM清理交给EZUIKit自己处理，避免冲突
    };
  }, []);

  // 监听Storybook环境变化，确保热重载时正确清理
  useEffect(() => {
    const handleBeforeUnload = () => {
      if (playerInstanceRef.current) {
        try {
          if (typeof playerInstanceRef.current.destroy === "function") {
            playerInstanceRef.current.destroy();
          }
          playerInstanceRef.current = null;
        } catch (error) {
          console.warn("页面卸载时清理播放器失败:", error);
        }
      }
    };

    // 在Storybook环境中，监听更多事件
    if (isStorybookEnv) {
      window.addEventListener("beforeunload", handleBeforeUnload);
      // 监听Storybook的iframe重载
      const handleVisibilityChange = () => {
        if (document.hidden && playerInstanceRef.current) {
          console.log("页面隐藏，暂停播放器");
          try {
            if (typeof playerInstanceRef.current.pause === "function") {
              playerInstanceRef.current.pause();
            }
          } catch (error) {
            console.warn("暂停播放器失败:", error);
          }
        }
      };
      document.addEventListener("visibilitychange", handleVisibilityChange);

      return () => {
        window.removeEventListener("beforeunload", handleBeforeUnload);
        document.removeEventListener(
          "visibilitychange",
          handleVisibilityChange
        );
      };
    } else {
      window.addEventListener("beforeunload", handleBeforeUnload);
      return () =>
        window.removeEventListener("beforeunload", handleBeforeUnload);
    }
  }, [isStorybookEnv]);

  return (
    <div
      style={{ padding: 24, backgroundColor: "#f5f5f5", minHeight: "100vh" }}
    >
      <Title level={2}>EZUIKit 播放器演示</Title>
      <Text type="secondary">
        这个组件演示了如何使用 ezuikit-js 库来创建视频播放器
      </Text>

      <Divider />

      <Alert
        message="重要说明"
        description={
          <div>
            <p>
              <strong>ezuikit-js 主要用于播放萤石云的视频流</strong>，使用
              ezopen:// 协议。
            </p>
            <p>
              <strong>错误代码 10001 说明：</strong>
              使用了不支持的协议格式，需要正确的萤石云地址。
            </p>
            <p>
              <strong>正确的 ezopen 格式：</strong>
              ezopen://open.ys7.com/设备序列号/通道号.hd.live
            </p>
            <p>
              示例中的萤石云地址需要替换为真实的设备序列号和验证码才能正常播放。
            </p>
          </div>
        }
        type="warning"
        showIcon
        style={{ marginBottom: 16 }}
      />

      {/* 控制面板 */}
      <Card title="播放器控制" style={{ marginBottom: 16 }}>
        <Space direction="vertical" style={{ width: "100%" }}>
          <div className="hidden">
            <Text strong>快速测试视频：</Text>
            <Space wrap style={{ marginTop: 8 }}>
              {defaultUrls.map((url, index) => {
                const labels = [
                  "萤石云直播流",
                  // "萤石云回放流",
                  // "HLS 流",
                  // "MP4 文件",
                ];
                return (
                  <Button
                    key={index}
                    onClick={() => initPlayer(url)}
                    loading={isLoading}
                    type={currentUrl === url ? "primary" : "default"}
                    size="small"
                  >
                    {labels[index]}
                  </Button>
                );
              })}
            </Space>
          </div>

          <div>
            <Text strong>自定义视频URL：</Text>
            <Input.Group compact style={{ marginTop: 8 }}>
              <Input
                value={currentUrl}
                onChange={(e) => setCurrentUrl(e.target.value)}
                style={{ width: "calc(100% - 100px)" }}
                placeholder="请输入视频URL（支持MP4、HLS、RTMP等格式）"
                onPressEnter={() => {
                  const url = currentUrl.trim();
                  if (url) {
                    initPlayer(url);
                  } else {
                    message.warning("请输入视频URL");
                  }
                }}
              />
              <Button
                type="primary"
                loading={isLoading}
                onClick={() => {
                  const url = currentUrl.trim();
                  if (url) {
                    initPlayer(url);
                  } else {
                    message.warning("请输入视频URL");
                  }
                }}
              >
                播放
              </Button>
            </Input.Group>
          </div>

          <div>
            <Text strong>萤石云 AccessToken：</Text>
            <Input.Group compact style={{ marginTop: 8 }}>
              <Input
                style={{ width: "calc(100% - 100px)" }}
                placeholder="请输入萤石云 AccessToken（用于 ezopen:// 协议）"
                value={accessToken}
                onChange={(e) => {
                  // 更新播放器配置中的 accessToken
                  setAccessToken(e.target.value.trim());
                  addLog(
                    `AccessToken 已更新: ${e.target.value
                      .trim()
                      .substring(0, 10)}...`
                  );
                }}
              />
              <Button
                type="default"
                onClick={() => {
                  const token = accessToken.trim();
                  if (token) {
                    message.success("AccessToken 已保存");
                    addLog("AccessToken 已保存到播放器配置");
                  } else {
                    message.warning("请输入 AccessToken");
                  }
                }}
              >
                保存
              </Button>
            </Input.Group>
            <Text
              type="secondary"
              style={{ fontSize: 12, display: "block", marginTop: 4 }}
            >
              注意：AccessToken 用于访问萤石云设备，请确保使用有效的令牌
            </Text>
          </div>

          <div>
            <Text strong>播放控制：</Text>
            <Space style={{ marginTop: 8 }}>
              <Button
                icon={<PlayCircleOutlined />}
                onClick={() => {
                  if (playerInstanceRef.current && playerStatus === "stopped") {
                    // 如果已有实例且处于停止状态，直接播放
                    playVideo();
                  } else {
                    // 否则重新初始化
                    initPlayer(currentUrl);
                  }
                }}
                disabled={playerStatus === "playing"}
                type="primary"
              >
                播放
              </Button>
              <Button
                icon={<PauseCircleOutlined />}
                onClick={pauseVideo}
                disabled={playerStatus !== "playing"}
              >
                暂停
              </Button>
              <Button
                icon={<StopOutlined />}
                onClick={stopVideo}
                disabled={playerStatus === "stopped"}
                danger
              >
                停止
              </Button>
              <Button
                icon={<ReloadOutlined />}
                onClick={reloadVideo}
                disabled={!currentUrl}
              >
                重新加载
              </Button>
            </Space>
          </div>
        </Space>
      </Card>

      <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
        {/* 播放器区域 */}
        <Card title="视频播放器" style={{ flex: 2, minWidth: 400 }}>
          <div
            ref={playerRef}
            data-player-container="true"
            style={{
              width: "100%",
              height: 400,
              backgroundColor: "#000",
              borderRadius: 8,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "white",
              fontSize: 16,
              border: "2px dashed #d9d9d9",
            }}
          >
            {isLoading ? (
              <div>正在加载播放器...</div>
            ) : !playerInstanceRef.current ? (
              <div>
                <div style={{ textAlign: "center" }}>
                  <PlayCircleOutlined
                    style={{ fontSize: 48, marginBottom: 16 }}
                  />
                  <div>请选择视频源开始播放</div>
                </div>
              </div>
            ) : null}
          </div>

          <div style={{ marginTop: 16 }}>
            <Text strong>播放状态：</Text>
            <Text
              style={{
                color:
                  playerStatus === "playing"
                    ? "#52c41a"
                    : playerStatus === "paused"
                    ? "#faad14"
                    : "#ff4d4f",
                marginLeft: 8,
              }}
            >
              {playerStatus === "playing"
                ? "播放中"
                : playerStatus === "paused"
                ? "已暂停"
                : "已停止"}
            </Text>
          </div>

          {currentUrl && (
            <div style={{ marginTop: 8 }}>
              <Text strong>当前URL：</Text>
              <Text
                style={{
                  wordBreak: "break-all",
                  fontSize: 12,
                  color: "#666",
                }}
              >
                {currentUrl}
              </Text>
            </div>
          )}
        </Card>

        {/* 日志面板 */}
        <Card title="播放器日志" style={{ flex: 1, minWidth: 300 }}>
          <div style={{ marginBottom: 12 }}>
            <Button size="small" onClick={clearLogs}>
              清空日志
            </Button>
          </div>

          <div
            style={{
              backgroundColor: "#f6f6f6",
              border: "1px solid #d9d9d9",
              borderRadius: 4,
              padding: 12,
              height: 350,
              overflowY: "auto",
              fontFamily: "monospace",
              fontSize: 12,
            }}
          >
            {playerLogs.length === 0 ? (
              <Text type="secondary">暂无日志记录</Text>
            ) : (
              playerLogs.map((log, index) => (
                <div
                  key={index}
                  style={{
                    marginBottom: 4,
                    color: index === 0 ? "#1890ff" : "#666",
                    lineHeight: 1.4,
                  }}
                >
                  {log}
                </div>
              ))
            )}
          </div>
        </Card>
      </div>

      {/* 使用说明 */}
      <Card title="使用说明" style={{ marginTop: 16 }}>
        <div style={{ lineHeight: 1.8 }}>
          <Text>
            <strong>ezuikit-js</strong> 是萤石云提供的前端视频播放
            SDK，主要特点：
          </Text>
          <ul style={{ marginTop: 12, paddingLeft: 20 }}>
            <li>支持多种视频格式：MP4、HLS、FLV、RTMP 等</li>
            <li>支持直播和点播功能</li>
            <li>提供丰富的播放器控制接口</li>
            <li>支持多种播放器模板和自定义样式</li>
            <li>兼容性好，支持主流浏览器</li>
          </ul>
          <Text style={{ marginTop: 12, display: "block" }}>
            在这个演示中，你可以：
          </Text>
          <ul style={{ paddingLeft: 20 }}>
            {/* <li>点击快速测试按钮加载预设的测试视频</li> */}
            <li>输入自定义的视频URL进行播放</li>
            <li>使用播放控制按钮控制视频播放</li>
            <li>查看播放器的实时日志信息</li>
          </ul>
          <Text style={{ marginTop: 12, display: "block" }}>
            <strong>注意：</strong>
            实际项目中使用时，通常需要配置萤石云的设备视频流地址，
            并可能需要进行身份验证等操作。
          </Text>
        </div>
      </Card>
    </div>
  );
};
